<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="优惠券" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="coupon">
			<view class="coupon-title">
				<view :class="{'coupon-title-item-active': selectIndex === 0}" @click="change_c_index(0)" class="coupon-title-item">未使用（{{ w_total }}）</view>
				<view :class="{'coupon-title-item-active': selectIndex === 1}" @click="change_c_index(1)" class="coupon-title-item">已使用（{{ y_total }}）</view>
				<view :class="{'coupon-title-item-active': selectIndex === 2}" @click="change_c_index(2)" class="coupon-title-item">已过期（{{ g_total }}）</view>
			</view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y @scrolltolower="onscrolltolower_w" v-show="selectIndex === 0" class="coupon-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 0 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y @scrolltolower="onscrolltolower_w" v-show="selectIndex === 0" class="coupon-list">
			<!-- #endif -->
				<view v-for="item in w_coupons" :key="item.id" class="coupon-list-item">
					<view class="coupon-list-item-left">
						<view class="coupon-list-item-left-price">
							<text class="coupon-list-item-left-price-mark">￥</text>
							<text class="coupon-list-item-left-price-num">{{ item.price }}</text>
						</view>
						<view class="coupon-list-item-left-warn">{{ item.usageCondition }}</view>
					</view>
					<view class="coupon-list-item-right">
						<text class="coupon-list-item-right-name">码上结&{{ item.storeName }}</text>
						<text class="coupon-list-item-right-desc">{{ item.usageCondition }}</text>
						<view class="coupon-list-item-right-btn">立即使用</view>
					</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y @scrolltolower="onscrolltolower_y" v-show="selectIndex === 1" class="coupon-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 1 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y @scrolltolower="onscrolltolower_y" v-show="selectIndex === 1" class="coupon-list">
			<!-- #endif -->
				<view v-for="item in y_coupons" :key="item.id" class="coupon-list-item">
					<view class="coupon-list-item-left">
						<view class="coupon-list-item-left-price">
							<text class="coupon-list-item-left-price-mark">￥</text>
							<text class="coupon-list-item-left-price-num">{{ item.price }}</text>
						</view>
						<view class="coupon-list-item-left-warn">{{ item.usageCondition }}</view>
					</view>
					<view class="coupon-list-item-right">
						<text class="coupon-list-item-right-name">码上结&{{ item.storeName }}</text>
						<text class="coupon-list-item-right-desc">{{ item.usageCondition }}</text>
					</view>
				</view>
			</scroll-view>
			<!-- #ifdef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': appListHeight + 'px' }" :scroll-with-animation='true' scroll-y @scrolltolower="onscrolltolower_g" v-show="selectIndex === 2" class="coupon-list">
			<!-- #endif -->
			<!-- #ifndef APP-PLUS -->
			<scroll-view :style="{ 'display': selectIndex === 2 ? 'flex' : 'none', 'height': h5ListHeight + 'px' }" :scroll-with-animation='true' scroll-y @scrolltolower="onscrolltolower_g" v-show="selectIndex === 2" class="coupon-list">
			<!-- #endif -->
				<view v-for="item in g_coupons" :key="item.id" class="coupon-list-item">
					<view class="coupon-list-item-left">
						<view class="coupon-list-item-left-price">
							<text class="coupon-list-item-left-price-mark">￥</text>
							<text class="coupon-list-item-left-price-num">{{ item.price }}</text>
						</view>
						<view class="coupon-list-item-left-warn">{{ item.usageCondition }}</view>
					</view>
					<view class="coupon-list-item-right">
						<text class="coupon-list-item-right-name">码上结&{{ item.storeName }}</text>
						<text class="coupon-list-item-right-desc">{{ item.usageCondition }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import { config } from '@/utils/config.js';
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'

	export default {
		components: {
			uniNavBar
		},
		mixins: [myMixin],
		data() {
			return {
				h5ListHeight: 0,
				appListHeight: 0,
				selectIndex: 0,
				// 未使用
				w_coupons: [],
				w_page: 1,
				w_size: 10,
				w_total: 0,
				w_totalPage: 0,
				// 已使用
				y_coupons: [],
				y_page: 1,
				y_size: 10,
				y_total: 0,
				y_totalPage: 0,
				// 已过期
				g_coupons: [],
				g_page: 1,
				g_size: 10,
				g_total: 0,
				g_totalPage: 0,
			};
		},
		onLoad() {
			const token = uni.getStorageSync('token')
			if (!token) {
				uni.showToast({
					icon: 'none',
					title: '尚未登录, 请先登录'
				})
				setTimeout(() => {
					uni.removeStorageSync('role')
					uni.removeStorageSync('memberId')
					uni.removeStorageSync('token')
					uni.removeStorageSync('openId')
					uni.reLaunch({
						url: '../verificationcodelogin/verificationcodelogin'
					})
				}, 777)
				return false
			}
			this.get_w_Coupons() // 未使用
			this.get_y_Coupons() // 已使用
			this.get_g_Coupons() // 已过期
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info = uni.createSelectorQuery().select(".coupon-title");
					info.boundingClientRect(function(data) {
						that.h5ListHeight = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.appListHeight = res.windowHeight - res.statusBarHeight - 44 - data.height // app的height
					}).exec()
				})
			})
		},
		methods: {
			back() {
				uni.navigateBack({})
			},
			onPullDownRefresh() {
				if (this.selectIndex === 0) {
					this.w_coupons = []
					this.w_page = 1
					this.w_size = 10
					this.w_total = 0
					this.w_totalPage = 0
					this.get_w_Coupons()
				} else if (this.selectIndex === 1) {
					this.y_coupons = []
					this.y_page = 1
					this.y_size = 10
					this.y_total = 0
					this.y_totalPage = 0
					this.get_y_Coupons()
				} else if (this.selectIndex === 2) {
					this.g_coupons = []
					this.g_page = 1
					this.g_size = 10
					this.g_total = 0
					this.g_totalPage = 0
					this.get_g_Coupons()
				}
			},
			onscrolltolower_w() {
				console.log(123)
				const page1 = this.w_page + 1
				const totalPage = this.w_totalPage
				if (page1 <= totalPage) {
					this.w_page = page1
					this.get_w_Coupons()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			onscrolltolower_y() {
				const page1 = this.y_page + 1
				const totalPage = this.y_totalPage
				if (page1 <= totalPage) {
					this.y_page = page1
					this.get_y_Coupons()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			onscrolltolower_g() {
				const page1 = this.g_page + 1
				const totalPage = this.g_totalPage
				if (page1 <= totalPage) {
					this.g_page = page1
					this.get_g_Coupons()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			change_c_index(index) {
				this.selectIndex = index
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			},
			// 未使用
			get_w_Coupons() {
				const page = this.w_page
				const size = this.w_size
				uni.request({
					url: `${config.api_base_url}coupon/coupon/0/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.w_total = data.total
							this.w_totalPage = this.pageTotal(this.w_total, this.w_size)
							this.w_coupons = this.w_coupons.concat(data.rows)
						} else {
							this.w_page = 1
							this.w_size = 10
							this.w_total = 0
							this.w_totalPage = 0
							this.w_coupons = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 已使用
			get_y_Coupons() {
				const page = this.y_page
				const size = this.y_size
				uni.request({
					url: `${config.api_base_url}coupon/coupon/1/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.y_total = data.total
							this.y_totalPage = this.pageTotal(this.y_total, this.y_size)
							this.y_coupons = this.y_coupons.concat(data.rows)
						} else {
							this.y_coupons = []
							this.y_page = 1
							this.y_size = 10
							this.y_total = 0
							this.y_totalPage = 0
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 已过期
			get_g_Coupons() {
				const page = this.g_page
				const size = this.g_size
				uni.request({
					url: `${config.api_base_url}coupon/coupon/2/${page}/${size}`,
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token')
					},
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.g_total = data.total
							this.g_totalPage = this.pageTotal(this.g_total, this.g_size)
							this.g_coupons = this.g_coupons.concat(data.rows)
						} else {
							this.g_coupons = []
							this.g_page = 1
							this.g_size = 10
							this.g_total = 0
							this.g_totalPage = 0
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			}
		}
	};
</script>
<style>
	page {
		background-color: #f6f5f8;
		width: 100%;
	}
</style>
<style scoped>
	.coupon {
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.coupon-title {
		width: 100%;
		height: 64rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		z-index: 1;
	}

	.coupon-title-item {
		width: 33.33%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
	}

	.coupon-title-item-active {
		color: #f02230;
		position: relative;
	}

	.coupon-title-item-active::after {
		position: absolute;
		left: 50%;
		margin-left: -31rpx;
		bottom: -10rpx;
		content: ' ';
		width: 62rpx;
		height: 4rpx;
		background-color: #f02230;
		border-radius: 2rpx;
	}
	.coupon-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-left: 16rpx;
		padding-right: 14rpx;
	}

	.coupon-list-item {
		width: 100%;
		height: 200rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		display: flex;
		align-items: center;
	}

	.coupon-list-item:last-child {
		margin-bottom: 0;
	}

	.coupon-list-item-left {
		width: 34%;
		height: 100%;
		background-color: #f02230;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.coupon-list-item-left::before {
		position: absolute;
		left: -15rpx;
		content: ' ';
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #f6f5f8;
	}

	.coupon-list-item-left-price {
		display: flex;
		align-items: baseline;
	}

	.coupon-list-item-left-price-mark {
		font-size: 28rpx;
		color: #fff;
	}

	.coupon-list-item-left-price-num {
		font-size: 68rpx;
		color: #fff;
		font-weight: 700;
	}

	.coupon-list-item-left-warn {
		font-size: 24rpx;
		color: #fff;
		font-weight: 500;
	}

	.coupon-list-item-right {
		width: calc(100% - 34%);
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		align-items: flex-start;
		padding-left: 32rpx;
		position: relative;
	}

	.coupon-list-item-right::after {
		position: absolute;
		right: -15rpx;
		content: ' ';
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #f6f5f8;
	}

	.coupon-list-item-right-name {
		font-size: 26rpx;
		line-height: 36rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
		margin-bottom: 4rpx;
	}

	.coupon-list-item-right-desc {
		font-size: 20rpx;
		font-weight: 500;
		line-height: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-bottom: 30rpx;
	}

	.coupon-list-item-right-btn {
		align-self: flex-end;
		margin-right: 44rpx;
		border-radius: 26rpx;
		font-size: 24rpx;
		line-height: 34rpx;
		color: #1677ff;
		font-weight: 500;
		padding: 4rpx 22rpx 8rpx 22rpx;
		border: 2rpx solid #1677ff;
	}
</style>
